<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 
            v-model绑定一个uname状态
            父组件中的uname模板状态可以接收到子组件中input的value值 
        -->
        <my-input type="text" title="姓名" v-model="uname"></my-input>
        <my-input type="password" title="密码" v-model="pass"></my-input>
        <my-input type="number" title="电话" v-model="phone"></my-input>

        <button type="submit" @click="registerClick">登录</button>
        <button type="reset" @click="clearClick">重置</button>
    </div>

    <script>
        Vue.component("myInput", {
            template: `
                <div>
                    <label>{{title}}</label>
                    <input :type="type" @input="handleInput" :value="value"/>
                </div>
            `,
            //props直接绑定value，可以与组件实例中的属性v-model关联
            props: ["type", "title", "value"],
            methods: {
                handleInput(eve) {
                    //console.log(eve.target.value);
                    //分发一个input事件，将改变后的value传递出去
                    //父组件因为v-model的双向数据绑定关系，可以直接获取到对应的内容
                    // 固定是input
                    this.$emit("input", eve.target.value);
                }
            }
        })
        var vm = new Vue({
            el: "#box",
            data: {
                uname: "",
                pass: "",
                phone: ""
            },
            methods: {
                registerClick() { //点击获取所有字段的内容
                    console.log(this.uname, this.pass, this.phone);
                },
                clearClick() {
                    this.uname = "",
                        this.pass = "",
                        this.phone = ""
                }
            }
        })
    </script>
</body>

</html>